<template>
  <div>
    <el-dialog
      ref="refDlg"
      title="专区"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600"
      @close="closeDialog"
    >
      <div>
        <table-box
          ref="styleTable"
          :table-config="tableConfig"
          :other-filters="otherFilters"
          :off-set="-20"
          show-index
          show-selection
          no-request
          @btnOperate="btnOperate"
          @selection-change="dataChange"
        />
      </div>
      <div slot="footer">
        <el-button size="mini" @click="closeDialog">取消</el-button>
        <el-button type="primary" size="mini" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'StyleDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    otherFilter: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      tableSelected: [],
      otherFilters: [{ 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': 1 }],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configStyle/page`,
        buttonGroupCode: 'xxx',
        setting: [
          {
            prop: 'styleCode',
            label: '专区编码',
            minWidth: '100'
          },
          {
            prop: 'styleName',
            label: '专区名称',
            minWidth: '100'
          }
        ]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.otherFilters = [...this.otherFilters, ...this.otherFilter]
    this.$nextTick(() => {
      this.$refs.styleTable.initTableData()
    })
  },
  activated() {},
  methods: {
    dataChange(row) {
      this.tableSelected = row
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogShow = false
    },
    // 确定
    submit() {
      if (this.tableSelected.length) {
        this.$emit('addSeries', this.tableSelected)
        this.dialogShow = false
      } else {
        this.$message.warning('请勾选专区')
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
